<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html >
<html lang="zh-CN">
  <head>
 	<title>国税设备展示</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	 <script type="text/javascript" src="${pageContext.servletContext.contextPath}/js/jtopo-0.4.7-min.js"></script>
	<script type="text/javascript" src="${pageContext.servletContext.contextPath}/js/jquery.js"></script>
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
    <div >
    <canvas id="canvas" width="1400" height="790" style="border: 1px solid rgb(68, 68, 68); cursor: default; background-color: rgb(238, 238, 238);">
     </canvas>   
   </div>
  		<script type="text/javascript">
  			
  			
  			//直线公共方法
  			function lineto(node1,node2,text){
  			  var link=new JTopo.Link(node1, node2, text);
  			  link.strokeColor ='98,134,233';
  			  scene.add(link);
  			}
  			
  				function newFoldLink(nodeA, nodeZ, text, direction, dashedPattern){
				var link = new JTopo.FoldLink(nodeA, nodeZ, text);
				//设置方向
				link.direction = direction || 'horizontal';//vertical左默认为右
				link.arrowsRadius = 0; //箭头大小
				link.lineWidth = 3; // 线宽
				link.bundleOffset = 60; // 折线拐角处的长度
				link.bundleGap = 20; // 线条之间的间隔
				link.textOffsetY = 3; // 文本偏移量（向下3个像素）
				//link.strokeColor = JTopo.util.randomColor(); // 线条颜色随机
				link.strokeColor ='98,134,233';
				link.dashedPattern = dashedPattern; //设置虚线度
				scene.add(link);
				return link;
			}
			
  			//获取到画布
  			var canvas = document.getElementById('canvas');			
			//获取到舞台
			var stage =  new JTopo.Stage(canvas);
			stage.eagleEye.visible = true;
			stage.mode = "drag";
			//stage.wheelZoom = 0.85;
  			
			//显示工具栏
			//showJTopoToobar(stage);
			var scene = new JTopo.Scene();
			scene.background = './img/bg.jpg';
			stage.add(scene);
			
			//实时业务区节点
			var ssnode=new JTopo.Node();
			ssnode.dragable =false;
			ssnode.setBound(150, 100,50, 30);
		    ssnode.setImage('./img/mrs.png');
		    var ssnode2=new JTopo.Node();
			ssnode2.setBound(310, 100,50, 30);
		    ssnode2.setImage('./img/mrs.png');
		    ssnode2.dragable =false;
		    scene.add(ssnode);
			scene.add(ssnode2);
		
			//节点三
			var ssnode3=new JTopo.Node();
			ssnode3.setBound(150, 170,50, 55);
		    ssnode3.setImage('./img/firewall.png');
		    ssnode3.dragable =false;
			scene.add(ssnode3);
			//节点四
			var ssnode4=new JTopo.Node();
			ssnode4.setBound(310,170,50,55);
			ssnode4.dragable =false;
			ssnode4.setImage('./img/firewall.png');
			scene.add(ssnode4);
			//圆点1
			var round1=new JTopo.Node();
			round1.setBound(240,103,20,25);
			round1.setImage('./img/dian.png');
			scene.add(round1);
			//圆点2
			var round2=new JTopo.Node();
			round2.setBound(240,185,20,25);
			round2.setImage('./img/dian.png');
			scene.add(round2);
	
			//连线
			lineto(ssnode,round1);
			lineto(round1,ssnode2);
			lineto(ssnode,ssnode3);
			lineto(ssnode3,round2);
			lineto(round2,ssnode4);
			lineto(ssnode2,ssnode4);
			
			/* var container=new JTopo.Container();
			container.fillColor = '123,135,158';
			container.borderRadius = 30; // 圆角
			container.dragble=false;
			container.add(ssnode);
			container.add(ssnode2);
			container.add(ssnode3);
			container.add(ssnode4); */
			
		/* 	scene.add(container); */
			
			//前置业务区
			var  qznode1=new JTopo.Node();
			qznode1.setBound(40,287,50,30);
			qznode1.setImage('./img/msr.png');
			qznode1.dragable =false;
			scene.add(qznode1);
			
			var round3=new JTopo.Node();
			round3.setBound(110,290,20,25);
			round3.setImage('./img/dian.png');
			scene.add(round3);
			
			var qznode2=new JTopo.Node();
		     qznode2.setBound(150,287,48,30);
		     qznode2.setImage('./img/msr02.png');
		     scene.add(qznode2);
			
			var round4=new JTopo.Node();
			round4.setBound(240,290,20,25);
			round4.setImage('./img/dian.png');
			scene.add(round4);
			
			
			
			var qznode3=new JTopo.Node();
			qznode3.setBound(313,287,48,30);
			qznode3.setImage('img/msr02.png');
			
			scene.add(qznode3);
			
			var qznode4=new JTopo.Node();
			qznode4.setBound(390,287,50,30);
			qznode4.setImage('./img/msr.png');
			scene.add(qznode4);
			
			var qznode5=new JTopo.Node();
			qznode5.setBound(150,357,50,55);
			qznode5.setImage('./img/firewall.png');
			scene.add(qznode5);
			
			var round5=new JTopo.Node();
			round5.setBound(240,373,20,25);
			round5.setImage('./img/dian.png');
			scene.add(round5);
			
			 var qznode6=new JTopo.Node();
			 qznode6.setBound(312,357,50,55);
			 qznode6.setImage('./img/firewall.png');
			 scene.add(qznode6);
			 
			 var qzcontainer=new JTopo.Container();
			qzcontainer.fillColor = '123,135,158';
			 qzcontainer.add(qznode1);
			 qzcontainer.add(qznode2);
			 qzcontainer.add(qznode3);
			 qzcontainer.add(qznode4);
			 qzcontainer.add(qznode5);
			 qzcontainer.add(qznode6);
			 qzcontainer.borderRadius=30;
			 scene.add(qzcontainer);
			 
			//前置业务区连线
		     lineto(qznode1,round3);
		     lineto(round3,qznode2);
		     lineto(qznode2,round4);
		     lineto(round4,qznode3);
		     lineto(qznode3,qznode4);
			 lineto(ssnode3,qznode2);
			 lineto(ssnode4,qznode3);
		     lineto(qznode2,qznode5);
		     lineto(qznode3,qznode6);
		     lineto(qznode5,round5);
		     lineto(round5,qznode6);
		     
		     
		     //互联网接入域
		     var hlwnode1=new JTopo.Node();
		     hlwnode1.setBound(550,100,50,55);
		     hlwnode1.setImage('./img/Home_Server.png');
		     hlwnode1.dragable=true;
		     scene.add(hlwnode1);
		    
		    var hlwnode2=new JTopo.Node();
		    hlwnode2.setBound(600,100,50,55);
		    hlwnode2.setImage('./img/Home_Server.png');
		    scene.add(hlwnode2);
		    
		    var hlwnode3=new JTopo.Node();
		    hlwnode3.setBound(700,120,52,28);
		    hlwnode3.setImage('./img/msr03.png');
		    scene.add(hlwnode3);
		    
		    var hlwnode4=new JTopo.Node();
		    hlwnode4.setBound(820,120,52,28);
		    hlwnode4.setImage('./img/msr03.png');
		    scene.add(hlwnode4);
		    
		    
		    var hlwnode5=new JTopo.Node();
		    hlwnode5.setBound(520,190,50,30);
		    hlwnode5.setImage('./img/msr.png');
		    scene.add(hlwnode5);
		     
		     
		    var hlwround=new JTopo.Node();
		    hlwround.setBound(585,193,20,25);
		    hlwround.setImage('./img/dian.png');
		    scene.add(hlwround);
		    
		    
		    var hlwnode6=new JTopo.Node();
		    hlwnode6.setBound(630,185,37,42);
		    hlwnode6.setImage('./img/msr02.png');
		    scene.add(hlwnode6);
		    
		    var  hlwnode6s=new JTopo.Node();
            hlwnode6s.setBound(640,175,0,0);
            scene.add(hlwnode6s);
		    
		    var hlwround2=new JTopo.Node();
		    hlwround2.setBound(690,193,20,25);
		    hlwround2.setImage('./img/dian.png');
		    scene.add(hlwround2);
		    
	
		    
		   /*   var alarmId=setInterval(function(){
                if(qznode5.alarm == ''){
                    qznode5.alarm = null;
                }else{
                    qznode5.alarm = 'asdfasdfas';
                }
            }, 600); */
            var hlwnode7=new JTopo.Node();
            hlwnode7.setBound(740,185,37,42);
            hlwnode7.setImage('./img/msr02.png');
            scene.add(hlwnode7);
            
            var hlwnode7s=new JTopo.Node();
            hlwnode7s.setBound(747,168,0,0);
            scene.add(hlwnode7s);
            
           var hlwcontariner =new JTopo.Container();
            hlwcontariner.fillColor = '123,135,158';
            hlwcontariner.borderRadius=30;
            hlwcontariner.add(hlwnode1);
            hlwcontariner.add(hlwnode2);
            scene.add(hlwcontariner);
            newFoldLink(hlwcontariner,hlwnode6s,'','vertical');
            newFoldLink(hlwnode6s,hlwnode6,'','vertical');
           // newFoldLink(hlwcontariner,hlwnode7,'','vertical');
            newFoldLink(hlwcontariner,hlwnode7s,'','vertical');
            newFoldLink(hlwnode7s,hlwnode7,'','vertical');
            lineto(hlwnode3,hlwnode4,"  ");
            lineto(hlwnode5,hlwround,"  ");
            lineto(hlwround2,hlwnode6,"  ");
            lineto(hlwnode6,hlwround2,"  ");
            lineto(hlwround2,hlwnode7,"  ");
          	lineto(hlwround,hlwnode6,"  ");
            //lineto(hlwnode7,hlwround3,"  ");
            
         //  rightangleJTopo.FoldLink(hlwnode2,hlwnode7);
       
           
         
           
		    </script>
  </body>
  	
  
</html>
